<template>
  <button @click="num+=step;emiters('update:modelValue',num)">{{num}}</button>
</template>
<script setup>
import { ref,watch,inject} from 'vue';
// 定义props step,modelValue
// defineProps:定义props
// var props = defineProps(['step','modelValue'])
const props = defineProps({
  step:{
    type:Number,
    default:1
  },
  modelValue:{
    type:Number,
    default:1
  }
})
// 定义num响应式数据,默认值用props传入的modelValue
const num = ref(props.modelValue);
// 定义一个事件发送器,发送update:modelValue事件
const emiters = defineEmits(['update:modelValu e'])
// 监听props modelValue的变化,变化后赋值给num
watch(()=>props.modelValue,(newVal)=>{
  num.value = newVal;
})
// 定义方法bigAdd,默认参数100
const bigAdd = (v=100)=>{
  num.value+=v;
  emiters('update:modelValue',num.value)
}
// 父组件可以访问 bigAdd和num属性
defineExpose({
  bigAdd,
  num
})
// 接收父组件的width
const width = inject('width')

</script>